<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>变形</title>
    <link rel="stylesheet" href="/css/reset.css"> <!-- 清除浏览器默认样式 -->
    <link rel="stylesheet" href="/css/public.css">
    <style>
    
        .box1{
            width: 1226px;
            margin: 0 auto;
            background-color: aliceblue;
            position: relative;
            height: 250px;
        }
        .micro-move{
            width:250px;
            height: 100%;
            background-color: red;
            position: absolute;
        }
        .box2{
            width: 100px;
            height: 50px;
            margin-top: 50%;
            margin-left: 50%;
            transform:translate3d(-50%,-50%,0);
                /*
                    x:左右,y:上下,z:3D突出
                    none: 不转换
                    matrix 
                    translate3d(x,y,z) 3D转换
                    scale3d(x,y,z) 3D缩放转换
                    rotate3d(x,y,z,angle) 3D旋转
                    ...更多参考w3c
                */
            
            background-color: rgb(89, 89, 89);
        }

    .box2:hover{
        transform:translate3d(-50%,-45%,0); /*  该方式移动不会影响其他元素、移动范围基于本身的大小*/
        box-shadow: 0 0 10px rgba(0, 0, 0, .7);
    }
    /* -------------------------------钟表------------------------------- */
    .clock-biaopan{
        position: absolute;
        left: 250px;
        width: 250px;
        height: 250px;
        border-radius: 50%;
        background-image: url(/helloworld_html5/imgs/biaopan1.webp);
        background-size: cover;
        animation: run 10s linear 1s infinite normal none running; /* 表盘转动 */
    }
    .clock{
        position: absolute;
        left: 250px;
        width: calc(250px - 8px);
        height: calc(100% - 8px);
        border-radius: 50%;
        border: 4px solid #000;
    }
    .clock > div{
        position: absolute;
        top: 0;bottom: 0;left: 0;right: 0;
        margin: auto;
    }
    .hour-wrapper{
        height: 60%;
        width: 60%;
        animation: run 86400s linear 1s infinite normal none running; /*24小时*/
    }
    .hour{
        height: 50%;
        width: 4px;
        background-color: #000;
        margin: auto;
    }
    .min-wrapper{
        height: 75%;
        width: 75%;
        animation: run 3600s linear 1s infinite normal none running; /*一小时*/
    }
    .min{
        height: 50%;
        width: 3px;
        background-color: #000;
        margin: auto;
    }
    .sec-wrapper{
        height: 90%;
        width: 90%;
        animation: run 60s steps(60) 1s infinite normal none running;
    }
    .sec{
        height: 50%;
        width: 2px;
        background-color: red;
        margin: auto;
    }

    @keyframes run{
        from{
            transform: rotateZ(0deg);
        }

        to{
            transform: rotateZ(360deg);
        }
        
    }

    /*********************缩放***********************/
    .suofang-box1{
        position: absolute;
        left: 500px;
        width: 250px;
        height: 250px;
        /* background-color: red; */
    }

    .suofang-box1 img{
        width: 50%;
        height: 50%;
        vertical-align: top;
        position: absolute;
        top: 0;bottom: 0;left: 0;right: 0;
        margin: auto;
        transition: all 1s linear;
    }
    .suofang-box1 img:hover{
        width: 100%;
        height: 100%;
    }

    /* -------------------------- 方块变形旋转 --------------------------------- */
    html{
        perspective: 800px;
    }

    .fangkuai-wrapper{
        margin: 0 auto;
        width: 1226px;
        height: 500px;
        position: relative;
        /* perspective: 800px; */
        transform-style: preserve-3d;
        animation: rotate 20s linear 1s infinite normal none running; /*一小时*/
    }

    .fangkuai-wrapper > div{
        width: 300px;
        height: 300px;
        opacity: 0.7;
        position: absolute;
        top: 0;bottom: 0;
        left: 0;right: 0;
        margin: auto;
    }

    .fangkuai-wrapper img{
        width: 100%;
        height: 100%;
        vertical-align: top;
    }

    .fangkuai-box1{
        transform: rotateY(90deg) translateZ(150px);
    }
    .fangkuai-box2{
        transform: rotateY(-90deg) translateZ(150px);
    }
    .fangkuai-box3{
        transform: rotateX(90deg) translateZ(150px);
    }
    .fangkuai-box4{
        transform: rotateX(-90deg) translateZ(150px);
    }
    .fangkuai-box5{
        transform: rotateY(180deg) translateZ(150px);
    }
    .fangkuai-box6{
        transform: rotateY(0deg) translateZ(150px);
    }

    @keyframes rotate {
        from{ /* 开始样式 */
            transform: rotateX(0) rotateZ(0);
        }
        to{ /* 结束样式 */
            transform: rotateX(360deg) rotateZ(360deg);
        }
    }
    
    </style>
</head>
<body>
    <div class="box1 clearfix">
        <div class="micro-move">
            <div class="box2">绝对定位居中+光标移入微移动</div>
        </div>

        <div class="clock-biaopan"></div>
        <div class="clock"><!-- 钟表部分 -->
            <div class="hour-wrapper"><!-- 时针 -->
                <div class="hour"></div>
            </div>

            <div class="min-wrapper"><!-- 分针 -->
                <div class="min"></div>
            </div>

            <div class="sec-wrapper"><!-- 秒针 -->
                <div class="sec"></div>
            </div>
        </div>

        <div class="suofang-box1"><img src="/helloworld_html5/imgs/fangkuai5.webp" alt=""></div>
    </div>
    <div class="fangkuai-wrapper"> <!-- 方块转动 -->
        <div class="fangkuai-box6"><img src="/helloworld_html5/imgs/fangkuai1.webp" alt=""></div>
        <div class="fangkuai-box2"><img src="/helloworld_html5/imgs/fangkuai3.webp" alt=""></div>
        <div class="fangkuai-box3"><img src="/helloworld_html5/imgs/fangkuai4.webp" alt=""></div>
        <div class="fangkuai-box4"><img src="/helloworld_html5/imgs/fangkuai5.webp" alt=""></div>
        <div class="fangkuai-box1"><img src="/helloworld_html5/imgs/fangkuai7.gif" alt=""></div>
        <div class="fangkuai-box5"><img src="/helloworld_html5/imgs/fangkuai8.gif" alt=""></div>
    </div>

    
</body>
</html>